<template>
  <panel shadow>
    <div slot="title">{{$t('m.ACM_Helper')}}</div>
    <div slot="extra">
      <ul class="filter">
        <li>
          {{$t('m.Auto_Refresh')}} (10s)
          <i-switch style="margin-left: 5px;" @on-change="handleAutoRefresh"></i-switch>
        </li>
        <li>
          <Button type="info" @click="getACInfo">{{$t('m.Refresh')}}</Button>
        </li>
      </ul>
    </div>
    <Table :data="pagedAcInfo" :columns="columns" :loading="loadingTable" disabled-hover></Table>
    <pagination :total="total"
                :page-size.sync="limit"
                :current.sync="page"
                @on-change="handlePage"
                @on-page-size-change="handlePage(1)"
                show-sizer></pagination>
  </panel>
</template>
<script>
  import { mapState, mapActions } from 'vuex'
  import { types } from '../../../../../store'
  import moment from 'moment'
  import Pagination from '@oj/components/Pagination.vue'
  import api from '@oj/api'

  export default {
    name: 'acm-helper',
    components: {
      Pagination
    },
    data () {
      return {
        page: 1,
        total: 0,
        loadingTable: false,
        columns: [
          {
            title: this.$i18n.t('m.AC_Time'),
            key: 'ac_time'
          },
          {
            title: this.$i18n.t('m.ProblemID'),
            align: 'center',
            key: 'problem_display_id'
          },
          {
            title: this.$i18n.t('m.First_Blood'),
            align: 'center',
            render: (h, {row}) => {
              if (row.ac_info.is_first_ac) {
                return h('Tag', {
                  props: {
                    color: 'red'
                  }
                }, this.$i18n.t('m.First_Blood'))
              } else {
                return h('span', '----')
              }
            }
          },
          {
            title: this.$i18n.t('m.Username'),
            align: 'center',
            render: (h, {row}) => {
              return h('a', {
                style: {
                  display: 'inline-block',
                  'max-width': '150px'
                },
                on: {
                  click: () => {
                    this.$router.push({
                      name: 'contest-submission-list',
                      query: {username: row.username}
                    })
                  }
                }
              }, row.username)
            }
          },
          {
            title: this.$i18n.t('m.RealName'),
            align: 'center',
            render: (h, {row}) => {
              return h('span', {
                style: {
                  display: 'inline-block',
                  'max-width': '150px'
                }
              }, row.real_name)
            }
          },
          {
            title: this.$i18n.t('m.Status'),
            align: 'center',
            render: (h, {row}) => {
              return h('Tag', {
                props: {
                  color: row.checked ? 'green' : 'yellow'
                }
              }, row.checked ? this.$i18n.t('m.Checked') : this.$i18n.t('m.Not_Checked'))
            }
          },
          {
            title: this.$i18n.t('m.Option'),
            fixed: 'right',
            align: 'center',
            width: 100,
            render: (h, {row}) => {
              return h('Button', {
                props: {
                  type: 'ghost',
                  size: 'small',
                  icon: 'checkmark',
                  disabled: row.checked
                },
                on: {
                  click: () => {
                    this.updateCheckedStatus(row)
                  }
                }
              }, this.$i18n.t('m.Check_It'))
            }
          }
        ],
        acInfo: [],
        pagedAcInfo: [],
        problemsMap: []
      }
    },
    mounted () {
      this.contestID = this.$route.params.contestID
      if (this.contestProblems.length === 0) {
        this.getContestProblems().then((res) => {
          this.mapProblemDisplayID()
          this.getACInfo()
        })
      } else {
        this.mapProblemDisplayID()
        this.getACInfo()
      }
    },
    methods: {
      ...mapActions(['getContestProblems']),
      mapProblemDisplayID () {
        let problemsMap = {}
        this.contestProblems.forEach(ele => {
          problemsMap[ele.id] = ele._id
        })
        this.problemsMap = problemsMap
      },
      getACInfo (page = 1) {
        this.loadingTable = true
        let params = {
          contest_id: this.$route.params.contestID
        }
        api.getACMACInfo(params).then(res => {
          this.loadingTable = false
          let data = res.data.data
          this.total = data.length
          this.acInfo = data
          this.handlePage()
        }).catch(() => {
          this.loadingTable = false
        })
      },
      updateCheckedStatus (row) {
        let data = {
          rank_id: row.id,
          contest_id: this.contestID,
          problem_id: row.problem_id,
          checked: true
        }
        api.updateACInfoCheckedStatus(data).then(res => {
          this.$success('Succeeded')
          this.getACInfo()
        }).catch(() => {
        })
      },
      handleAutoRefresh (value) {
        if (value) {
          this.refreshFunc = setInterval(() => {
            this.page = 1
            this.getACInfo()
          }, 10000)
        } else {
          clearInterval(this.refreshFunc)
        }
      },
      handlePage (page = 1) {
        if (page !== 1) {
          this.loadingTable = true
        }
        let pageInfo = this.acInfo.slice((this.page - 1) * this.limit, this.page * this.limit)
        for (let v of pageInfo) {
          if (v.init) {
            continue
          } else {
            v.init = true
            v.problem_display_id = this.problemsMap[v.problem_id]
            v.ac_time = moment(this.contest.start_time).add(v.ac_info.ac_time, 'seconds').local().format('YYYY-M-D  HH:mm:ss')
          }
        }
        this.pagedAcInfo = pageInfo
        this.loadingTable = false
      }
    },
    computed: {
      ...mapState({
        'contest': state => state.contest.contest,
        'contestProblems': state => state.contest.contestProblems
      }),
      limit: {
        get () {
          return this.$store.state.contest.rankLimit
        },
        set (value) {
          this.$store.commit(types.CHANGE_CONTEST_RANK_LIMIT, {rankLimit: value})
        }
      }
    },
    beforeDestroy () {
      clearInterval(this.refreshFunc)
    }
  }
</script>
<style lang="less" scoped>

</style>
